<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>技术交流论坛 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B7BDF;
      --primary-light: #E8EBFA;
      --secondary: #FF7D54;
      --success: #4CAF50;
      --warning: #FFC107;
      --danger: #F44336;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --bg-light: #F2F3F5;
      --bg-white: #FFFFFF;
      --border-light: #E5E6EB;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      line-height: 1.6;
      font-size: 15px;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--primary);
      color: white;
      padding: 0.75rem 1rem;
    }
    
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.9);
      padding: 0.5rem 0.75rem;
    }
    
    .navbar-nav .nav-link.active {
      color: white;
      font-weight: 500;
    }
    
    /* 论坛头部信息 */
    .forum-header {
      background-color: var(--bg-white);
      padding: 15px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .forum-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .forum-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: #E3F2FD;
      color: #2196F3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    
    .forum-stats {
      display: flex;
      gap: 20px;
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .stat-value {
      color: var(--primary);
      font-weight: 600;
    }
    
    /* 内容切换栏 */
    .content-tabs {
      display: flex;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .content-tab {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      position: relative;
    }
    
    .content-tab.active {
      color: var(--primary);
    }
    
    .content-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: var(--primary);
    }
    
    /* 帖子列表容器 */
    .posts-container {
      display: none;
    }
    
    .posts-container.active {
      display: block;
    }
    
    /* 筛选工具栏 */
    .filter-bar {
      background-color: var(--bg-white);
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
    }
    
    .filter-select {
      padding: 6px 10px;
      border-radius: 6px;
      border: 1px solid var(--border-light);
      font-size: 14px;
      color: var(--text-primary);
      background-color: var(--bg-white);
    }
    
    .view-controls {
      display: flex;
      gap: 8px;
    }
    
    .view-btn {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: 1px solid var(--border-light);
      background-color: var(--bg-white);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
    }
    
    .view-btn.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    /* 帖子卡片样式 */
    .posts-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    /* 标准卡片样式 */
    .card-view .post-item {
      background-color: var(--bg-white);
      border-radius: 12px;
      margin: 10px 15px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    /* 列表样式 */
    .list-view .post-item {
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      margin: 0;
    }
    
    /* 紧凑样式 */
    .compact-view .post-item {
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      margin: 0;
      padding: 10px 15px;
    }
    
    .compact-view .post-content {
      display: none;
    }
    
    .compact-view .post-footer {
      justify-content: flex-end;
    }
    
    .compact-view .post-header {
      margin-bottom: 0;
    }
    
    /* 帖子项通用样式 */
    .post-item {
      padding: 15px;
    }
    
    .post-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    
    .post-author {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .author-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .author-info {
      min-width: 0;
    }
    
    .author-name {
      font-weight: 500;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .post-time {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .post-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    
    .post-content {
      font-size: 15px;
      color: var(--text-primary);
      line-height: 1.6;
      margin-bottom: 15px;
    }
    
    .post-media {
      margin-bottom: 15px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .post-image {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .post-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
    }
    
    .post-meta {
      display: flex;
      gap: 15px;
      color: var(--text-secondary);
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .post-actions {
      display: flex;
      gap: 10px;
    }
    
    .action-btn {
      color: var(--text-secondary);
      background: none;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .action-btn:hover {
      background-color: var(--bg-light);
      color: var(--primary);
    }
    
    /* 置顶和热门标记 */
    .post-sticky .post-header::before {
      content: '置顶';
      position: absolute;
      left: 15px;
      top: 15px;
      background-color: var(--danger);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    
    .post-sticky .post-header {
      position: relative;
      padding-left: 40px;
    }
    
    .hot-tag {
      display: inline-block;
      background-color: var(--danger);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      margin-left: 8px;
    }
    
    /* 论坛详情样式 */
    .forum-detail {
      background-color: var(--bg-white);
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .detail-section {
      margin-bottom: 20px;
    }
    
    .detail-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .forum-description {
      line-height: 1.7;
      margin-bottom: 15px;
    }
    
    .moderator-list {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .moderator-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 60px;
    }
    
    .moderator-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 5px;
    }
    
    .moderator-name {
      font-size: 13px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
    
    .rule-item {
      margin-bottom: 10px;
      display: flex;
      gap: 10px;
    }
    
    .rule-number {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--primary-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 发布按钮 */
    .fab-button {
      position: fixed;
      bottom: 70px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--secondary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 4px 10px rgba(255, 125, 84, 0.4);
      border: none;
      z-index: 1000;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand">
    <div class="container-fluid">
      <ul class="navbar-nav w-100 justify-content-between">
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="返回">
            <i class="fa fa-arrow-left"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">技术交流论坛</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="更多">
            <i class="fa fa-ellipsis-v"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <!-- 论坛头部信息 -->
  <div class="forum-header">
    <div class="forum-title">
      <div class="forum-icon">
        <i class="fa fa-code"></i>
      </div>
      技术交流论坛
    </div>
    <div class="forum-stats">
      <div class="stat-item">
        <i class="fa fa-user-o"></i>
        <span>12.5k 成员</span>
      </div>
      <div class="stat-item">
        <i class="fa fa-file-text-o"></i>
        <span><span class="stat-value">3.2k</span> 帖子</span>
      </div>
      <div class="stat-item">
        <i class="fa fa-comment-o"></i>
        <span>今日 <span class="stat-value">128</span> 回复</span>
      </div>
    </div>
  </div>
  
  <!-- 内容切换栏 -->
  <div class="content-tabs">
    <div class="content-tab active" data-tab="posts">帖子列表</div>
    <div class="content-tab" data-tab="detail">论坛详情</div>
  </div>
  
  <!-- 帖子列表区域 -->
  <div class="posts-container active" id="posts">
    <!-- 筛选工具栏 -->
    <div class="filter-bar">
      <select class="filter-select">
        <option>最新发布</option>
        <option>热门优先</option>
        <option>回复最多</option>
        <option>精华帖</option>
      </select>
      <div class="view-controls">
        <button class="view-btn active" data-view="card" title="卡片视图">
          <i class="fa fa-th-large"></i>
        </button>
        <button class="view-btn" data-view="list" title="列表视图">
          <i class="fa fa-list"></i>
        </button>
        <button class="view-btn" data-view="compact" title="紧凑视图">
          <i class="fa fa-align-left"></i>
        </button>
      </div>
    </div>
    
    <!-- 帖子列表 -->
    <ul class="posts-list card-view" id="postsList">
      <!-- 置顶帖子 -->
      <li class="post-item post-sticky">
        <div class="post-header">
          <div class="post-author">
            <img src="https://picsum.photos/200/200?random=10" alt="管理员头像" class="author-avatar">
            <div class="author-info">
              <div class="author-name">技术论坛管理员</div>
              <div class="post-time">2023-06-15</div>
            </div>
          </div>
        </div>
        <div class="post-title">论坛版规及新人必读指南</div>
        <div class="post-content">
          欢迎加入技术交流论坛！为了维护良好的交流环境，请所有成员遵守以下规定：<br><br>
          1. 禁止发布与技术无关的内容<br>
          2. 禁止人身攻击和辱骂行为<br>
          3. 禁止发布广告、二维码等联系方式<br>
          4. 提问前请先搜索是否有类似问题<br>
          5. 分享有价值的技术内容可获得论坛积分<br><br>
          违反规定将根据情节轻重给予警告、禁言或封号处理。
        </div>
        <div class="post-footer">
          <div class="post-meta">
            <div class="meta-item">
              <i class="fa fa-eye"></i> 15.2k
            </div>
            <div class="meta-item">
              <i class="fa fa-comment-o"></i> 328
            </div>
            <div class="meta-item">
              <i class="fa fa-heart-o"></i> 856
            </div>
          </div>
          <div class="post-actions">
            <button class="action-btn" title="收藏">
              <i class="fa fa-star-o"></i>
            </button>
            <button class="action-btn" title="分享">
              <i class="fa fa-share-alt"></i>
            </button>
          </div>
        </div>
      </li>
      
      <!-- 普通帖子1 -->
      <li class="post-item">
        <div class="post-header">
          <div class="post-author">
            <img src="https://picsum.photos/200/200?random=1" alt="李思成头像" class="author-avatar">
            <div class="author-info">
              <div class="author-name">李思成</div>
              <div class="post-time">今天 09:24</div>
            </div>
          </div>
        </div>
        <div class="post-title">
          React 18新特性详解及实战案例 <span class="hot-tag">热门</span>
        </div>
        <div class="post-content">
          最近在项目中升级到了React 18，发现了很多实用的新特性，特别是并发渲染和自动批处理更新机制，大大提升了应用性能。本文将详细介绍这些新特性的使用方法和实际应用场景...
        </div>
        <div class="post-media">
          <img src="https://picsum.photos/800/400?random=101" alt="React 18特性图示" class="post-image">
        </div>
        <div class="post-footer">
          <div class="post-meta">
            <div class="meta-item">
              <i class="fa fa-eye"></i> 2.1k
            </div>
            <div class="meta-item">
              <i class="fa fa-comment-o"></i> 86
            </div>
            <div class="meta-item">
              <i class="fa fa-heart-o"></i> 324
            </div>
          </div>
          <div class="post-actions">
            <button class="action-btn" title="收藏">
              <i class="fa fa-star-o"></i>
            </button>
            <button class="action-btn" title="分享">
              <i class="fa fa-share-alt"></i>
            </button>
          </div>
        </div>
      </li>
      
      <!-- 普通帖子2 -->
      <li class="post-item">
        <div class="post-header">
          <div class="post-author">
            <img src="https://picsum.photos/200/200?random=2" alt="张开发头像" class="author-avatar">
            <div class="author-info">
              <div class="author-name">张开发</div>
              <div class="post-time">昨天 15:30</div>
            </div>
          </div>
        </div>
        <div class="post-title">前端性能优化的10个实用技巧</div>
        <div class="post-content">
          结合最近的项目经验，总结了10个前端性能优化的实用技巧，涵盖了从资源加载、代码优化到缓存策略等多个方面。这些技巧都是经过实践检验的，能够有效提升页面加载速度和运行流畅度...
        </div>
        <div class="post-footer">
          <div class="post-meta">
            <div class="meta-item">
              <i class="fa fa-eye"></i> 1.8k
            </div>
            <div class="meta-item">
              <i class="fa fa-comment-o"></i> 52
            </div>
            <div class="meta-item">
              <i class="fa fa-heart-o"></i> 198
            </div>
          </div>
          <div class="post-actions">
            <button class="action-btn" title="收藏">
              <i class="fa fa-star-o"></i>
            </button>
            <button class="action-btn" title="分享">
              <i class="fa fa-share-alt"></i>
            </button>
          </div>
        </div>
      </li>
      
      <!-- 普通帖子3 -->
      <li class="post-item">
        <div class="post-header">
          <div class="post-author">
            <img src="https://picsum.photos/200/200?random=3" alt="王程序头像" class="author-avatar">
            <div class="author-info">
              <div class="author-name">王程序</div>
              <div class="post-time">3天前</div>
            </div>
          </div>
        </div>
        <div class="post-title">TypeScript高级类型技巧分享</div>
        <div class="post-content">
          TypeScript的类型系统非常强大，但很多开发者只用到了基础功能。本文将分享几个实用的高级类型技巧，包括条件类型、映射类型和类型守卫等，帮助你写出更健壮的代码...
        </div>
        <div class="post-media">
          <img src="https://picsum.photos/800/400?random=102" alt="TypeScript代码示例" class="post-image">
        </div>
        <div class="post-footer">
          <div class="post-meta">
            <div class="meta-item">
              <i class="fa fa-eye"></i> 1.5k
            </div>
            <div class="meta-item">
              <i class="fa fa-comment-o"></i> 47
            </div>
            <div class="meta-item">
              <i class="fa fa-heart-o"></i> 215
            </div>
          </div>
          <div class="post-actions">
            <button class="action-btn" title="收藏">
              <i class="fa fa-star-o"></i>
            </button>
            <button class="action-btn" title="分享">
              <i class="fa fa-share-alt"></i>
            </button>
          </div>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 论坛详情区域 -->
  <div class="posts-container" id="detail">
    <div class="forum-detail">
      <div class="detail-section">
        <div class="detail-title">论坛介绍</div>
        <div class="forum-description">
          技术交流论坛是一个专注于编程开发、技术分享与交流的社区。无论你是前端、后端、移动开发工程师，还是UI/UX设计师，都能在这里找到有价值的内容和志同道合的伙伴。
        </div>
        <div class="forum-description">
          我们鼓励分享技术心得、解决问题、讨论行业趋势，共同成长。定期会有技术大牛进行在线分享和问答活动，欢迎积极参与。
        </div>
      </div>
      
      <div class="detail-section">
        <div class="detail-title">论坛管理员</div>
        <div class="moderator-list">
          <div class="moderator-item">
            <img src="https://picsum.photos/200/200?random=10" alt="管理员1" class="moderator-avatar">
            <div class="moderator-name">技术论坛管理员</div>
          </div>
          <div class="moderator-item">
            <img src="https://picsum.photos/200/200?random=11" alt="管理员2" class="moderator-avatar">
            <div class="moderator-name">张技术总监</div>
          </div>
          <div class="moderator-item">
            <img src="https://picsum.photos/200/200?random=12" alt="管理员3" class="moderator-avatar">
            <div class="moderator-name">李开发专家</div>
          </div>
        </div>
      </div>
      
      <div class="detail-section">
        <div class="detail-title">论坛规则</div>
        <div class="rule-item">
          <div class="rule-number">1</div>
          <div class="rule-content">禁止发布与技术无关的内容，包括但不限于广告、政治讨论、色情内容等</div>
        </div>
        <div class="rule-item">
          <div class="rule-number">2</div>
          <div class="rule-content">尊重他人，禁止人身攻击、辱骂、歧视等不友善行为</div>
        </div>
        <div class="rule-item">
          <div class="rule-number">3</div>
          <div class="rule-content">禁止发布任何形式的联系方式，包括QQ、微信、邮箱、二维码等</div>
        </div>
        <div class="rule-item">
          <div class="rule-number">4</div>
          <div class="rule-content">提问前请先搜索是否有类似问题，避免重复发帖</div>
        </div>
        <div class="rule-item">
          <div class="rule-number">5</div>
          <div class="rule-content">分享有价值的技术内容可获得论坛积分，积分可用于兑换礼品或参与特殊活动</div>
        </div>
      </div>
      
      <div class="detail-section">
        <div class="detail-title">常见问题</div>
        <div class="rule-item">
          <div class="rule-number">Q</div>
          <div class="rule-content">如何获得论坛积分？<br>
          答：发布优质内容、参与讨论、帮助他人解决问题均可获得积分。</div>
        </div>
        <div class="rule-item">
          <div class="rule-number">Q</div>
          <div class="rule-content">如何成为论坛的管理员或版主？<br>
          答：活跃用户且有专业知识，可申请成为版主，经过考核后即可上任。</div>
        </div>
        <div class="rule-item">
          <div class="rule-number">Q</div>
          <div class="rule-content">论坛是否有线下活动？<br>
          答：每月会组织一次线下技术沙龙，具体时间和地点会在论坛公告发布。</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-comments nav-icon"></i>
      <span>论坛</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 发布按钮 -->
  <button class="fab-button" aria-label="发布新帖">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 切换内容标签
    document.querySelectorAll('.content-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有活跃状态
        document.querySelectorAll('.content-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.posts-container').forEach(c => c.classList.remove('active'));
        
        // 添加当前活跃状态
        this.classList.add('active');
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 切换视图模式
    document.querySelectorAll('.view-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有按钮的活跃状态
        document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
        // 添加当前按钮的活跃状态
        this.classList.add('active');
        
        // 移除所有视图类
        document.getElementById('postsList').classList.remove('card-view', 'list-view', 'compact-view');
        // 添加当前视图类
        document.getElementById('postsList').classList.add(`${this.getAttribute('data-view')}-view`);
      });
    });
    
    // 帖子点击事件
    document.querySelectorAll('.post-item').forEach(item => {
      item.addEventListener('click', function(e) {
        // 如果点击的是按钮，不触发帖子详情
        if (e.target.closest('.action-btn')) {
          return;
        }
        
        const title = this.querySelector('.post-title').textContent.trim();
        alert(`进入帖子详情: ${title}`);
      });
    });
    
    // 收藏按钮点击事件
    document.querySelectorAll('.action-btn .fa-star-o').forEach(icon => {
      icon.parentElement.addEventListener('click', function(e) {
        e.stopPropagation();
        if (this.querySelector('i').classList.contains('fa-star-o')) {
          this.querySelector('i').classList.replace('fa-star-o', 'fa-star');
          this.style.color = var(--warning);
          showToast('收藏成功');
        } else {
          this.querySelector('i').classList.replace('fa-star', 'fa-star-o');
          this.style.color = '';
          showToast('取消收藏');
        }
      });
    });
    
    // 分享按钮点击事件
    document.querySelectorAll('.action-btn .fa-share-alt').forEach(icon => {
      icon.parentElement.addEventListener('click', function(e) {
        e.stopPropagation();
        showToast('分享功能待实现');
      });
    });
    
    // 发布新帖按钮点击事件
    document.querySelector('.fab-button').addEventListener('click', function() {
      // 创建发布帖子的模态框
      const modal = document.createElement('div');
      modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-end justify-center';
      modal.innerHTML = `
        <div class="bg-white w-full rounded-t-xl p-5 max-height-[80vh] overflow-y-auto">
          <div class="text-center mb-6">
            <h3 class="text-lg font-semibold">发布新帖</h3>
          </div>
          
          <div class="mb-4">
            <label class="block text-sm text-gray-600 mb-2">标题</label>
            <input type="text" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="请输入帖子标题">
          </div>
          
          <div class="mb-6">
            <label class="block text-sm text-gray-600 mb-2">内容</label>
            <textarea class="w-full p-3 border border-gray-300 rounded-lg" rows="6" placeholder="分享你的技术心得、问题或想法..."></textarea>
          </div>
          
          <div class="mb-6">
            <div class="flex gap-3 mb-3">
              <button class="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm">
                <i class="fa fa-image text-gray-500"></i> 图片
              </button>
              <button class="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm">
                <i class="fa fa-code text-gray-500"></i> 代码
              </button>
              <button class="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm">
                <i class="fa fa-link text-gray-500"></i> 链接
              </button>
            </div>
          </div>
          
          <div class="flex gap-3">
            <button class="flex-1 py-3 bg-gray-100 rounded-lg text-gray-700 font-medium" id="cancelPost">取消</button>
            <button class="flex-1 py-3 bg-primary rounded-lg text-white font-medium">发布</button>
          </div>
        </div>
      `;
      document.body.appendChild(modal);
      document.body.style.overflow = 'hidden';
      
      // 取消按钮事件
      modal.querySelector('#cancelPost').addEventListener('click', function() {
        modal.remove();
        document.body.style.overflow = '';
      });
      
      // 点击外部关闭
      modal.addEventListener('click', function(e) {
        if (e.target === modal) {
          modal.remove();
          document.body.style.overflow = '';
        }
      });
    });
    
    // 显示提示消息
    function showToast(message) {
      // 检查是否已有toast
      let toast = document.querySelector('.toast');
      if (!toast) {
        toast = document.createElement('div');
        toast.className = 'toast fixed bottom-70 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 text-white px-4 py-2 rounded z-50';
        document.body.appendChild(toast);
      }
      
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
